@{
    Layout = null;
}

<div id="mediaApp" style="display:none">
    <nav class="admin-toolbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <div class="upload-button">
                    <label for="fileupload" class="btn btn-success fileinput-button">
                        <input id="fileupload" type="file" name="files" multiple="multiple">
                        <i class="fa fa-upload" aria-hidden="true"></i>
                        @T["Upload files..."]
                    </label>
                </div>
            </li>
        </ul>
    </nav>


    <nav class="media-application-toolbar breadcrumb">
        <span class="breadcrumb-item" v-bind:class="{ active: isHome}"><a :href="isHome ? null : '#'" v-on:click="selectRoot">@T["Media Library"]</a></span>
        <span v-for="(folder, i) in parents" v-cloak
                class="breadcrumb-item"
                v-bind:class="{active: parents.length - i == 1}">
            <a :href="parents.length - i == 1 ? null : '#'" v-on:click="selectFolder(folder)">{{ folder.name }}</a>
        </span>
        <div class="btn-group">
            <a v-cloak href="javascript:;" class="btn btn-secondary btn-sm" v-on:click="createFolder"><i class="fa fa-plus text-muted"></i></a>
            <a v-cloak v-show="!isHome" href="javascript:;" v-on:click="deleteFolder" class="btn btn-secondary btn-sm"><i class="fa fa-trash text-muted"></i></a>
        </div>
        <div class="pull-right btn-group" v-if="selectedMedia" >
            <code>{{ selectedMedia.name }}</code>
            <a href="javascript:;" v-on:click="deleteMedia" class="btn btn-secondary btn-sm"><i class="fa fa-trash text-muted"></i></a>
        </div>
    </nav>

    <div class="media-container row">

        <div id="navigationApp" class="media-container-navigation" v-cloak>
            <ol id="media-container-navigation-menu">
                <folder :model="root">
                </folder>
            </ol>
        </div>

        <div class="media-container-main" v-cloak>
            <ol class="row">
                <li v-for="media in mediaItems"
                    :key="media.name"
                    class="media-container-main-list-item"
                    v-on:click="selectMedia(media)">
                    <div class="media-container-main-item" v-bind:class="{selected: selectedMedia == media}">
                        <img v-if="media.mime.startsWith('image')" v-bind:src="media.url + '?width=240&height=240'" v-bind:data-mime="media.mime" />
                        <i v-else class="fa fa-file-o" v-bind:data-mime="media.mime"></i>
                        <div class="media-container-main-item-title">
                            <span class="media-filename">{{ media.name }}</span>
                        </div>
                    </div>
                </li>
            </ol>
        </div>
    </div>
</div>

<input type="hidden" id="getFoldersUrl" value="@Url.Action("GetFolders", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="deleteFolderUrl" value="@Url.Action("DeleteFolder", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="createFolderUrl" value="@Url.Action("CreateFolder", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="getMediaItemsUrl" value="@Url.Action("GetMediaItems", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="deleteMediaUrl" value="@Url.Action("DeleteMedia", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="uploadFiles" value="@Url.Action("Upload", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="deleteFolderMessage" value="@T["Are you sure you want to delete this folder?"]" />
<input type="hidden" id="deleteMediaMessage" value="@T["Are you sure you want to delete this media?"]" />

<div class="modal" id="createFolderModal" tabindex="-1" role="dialog" aria-labelledby="createFolderModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modelTitle">@T["Create Folder"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="input" class="form-control-label" id="input-label">@T["Folder name"]</label>
                    <input type="text" id="create-folder-name" class="form-control" >
                </div>
                <div id="createFolderModal-errors"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="modalFooterOk">@T["Ok"]</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>
